<template>
  <el-dialog v-model="dialogVisible" title="存货参照" align-center width="80%" >
    <el-form>
      <el-row :gutter="20">
        <el-col :span="4" :xs="24">
          <ContentWrap class="h-1/1">
            <InventoryClassifyTree @node-click="handleClassifyNodeClick"/>
          </ContentWrap>
        </el-col>
        <el-col :span="20" :xs="24">
          <ContentWrap>
            <!-- 搜索工作栏 style="height:auto;align-items:stretch;" -->
            <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true"
                     label-width="68px">
              <el-row>
                <el-col :span="6" :xs="24">
                  <el-form-item label="存货编码" prop="code">
                    <el-input
                      v-model="queryParams.code" placeholder="请输入存货编码" clearable
                      @keyup.enter="handleQuery"/>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="24">
                  <el-form-item label="存货名称" prop="name">
                    <el-input
                      v-model="queryParams.name" placeholder="请输入存货名称" clearable
                      @keyup.enter="handleQuery"/>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="24">
                  <el-form-item label="规格型号" prop="specModel">
                    <el-input
                      v-model="queryParams.specModel" placeholder="请输入规格型号" clearable
                      @keyup.enter="handleQuery"/>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="24">
                  <el-form-item label="批次管理" prop="isBatch">
                    <el-select v-model="queryParams.isBatch" placeholder="" clearable
                               class="!w-100px">
                      <el-option
                        v-for="dict in getIntDictOptions(DICT_TYPE.WMS_INVENTORY_IS_BATCH)"
                        :key="dict.value" :label="dict.label" :value="dict.value"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6" :xs="24">
                  <el-form-item label="品牌" prop="brand">
                    <el-input
                      v-model="queryParams.brand" placeholder="请输入品牌" clearable
                      @keyup.enter="handleQuery"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8" :xs="24">
                  <el-form-item>
                    <el-button @click="handleQuery">
                      <Icon icon="ep:search" class="mr-5px"/>
                      搜索
                    </el-button>
                    <el-button @click="resetQuery">
                      <Icon icon="ep:refresh" class="mr-5px"/>
                      重置
                    </el-button>
                    <el-button type="primary" @click="handleSubmit" >
                      提交
                    </el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </ContentWrap>
          <!-- 列表 -->
          <ContentWrap>
            <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true"
                      :header-cell-style="{'text-align':'center'}" height="400px"
                      @selection-change="handleSelectionChange">
              <el-table-column type="selection"/>
              <el-table-column label="存货编码" prop="code"/>
              <el-table-column label="存货名称" prop="name"/>
              <el-table-column label="规格型号" prop="specModel"/>
              <el-table-column label="存货分类" prop="classifyName"/>
              <el-table-column label="计量单位" prop="unitName"/>
              <el-table-column label="税率" align="center" prop="taxRate">
                <template #default="scope">
                  <dict-tag :type="DICT_TYPE.WMS_TAX_RATE" :value="scope.row.taxRate"/>
                </template>
              </el-table-column>
              <el-table-column label="批次管理" align="center" prop="isBatch">
                <template #default="scope">
                  <dict-tag :type="DICT_TYPE.WMS_INVENTORY_IS_BATCH" :value="scope.row.isBatch"/>
                </template>
              </el-table-column>
              <el-table-column label="品牌" prop="brand"/>
              <el-table-column label="现存量" prop="quantity"/>
            </el-table>
            <!-- 分页 -->
            <Pagination :total="total" v-model:page="queryParams.pageNo"
                        v-model:limit="queryParams.pageSize" @pagination="getList"/>
          </ContentWrap>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
import {InventoryStockApi, InventoryStockVO} from '@/api/wms/inventory/stock'
import InventoryClassifyTree from "../InventoryClassifyTree.vue";
import {InventoryVO} from "@/api/wms/inventory";

/** 存货档案 列表 */
defineOptions({name: 'InventoryStock'})

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<InventoryStockVO[]>([]) // 列表的数据
const formData = ref<InventoryVO[]>([])
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  code: undefined,
  name: undefined,
  specModel: undefined,
  classifyId: undefined,
  isBatch: undefined,
  brand: undefined,
})
const dialogVisible = ref(false);
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

const open = () => {
  dialogVisible.value = true;
  getList();
};

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await InventoryStockApi.getInventoryStockPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const handleSelectionChange = (selection: InventoryVO[]) => {
  formData.value = selection;
};

/** 处理分类树被点击 */
const handleClassifyNodeClick = async (row) => {
  queryParams.classifyId = row.id
  await getList()
}

const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const handleSubmit = () => {
  dialogVisible.value = false;
  // 触发 success 事件，并传递表单数据
  emit('success', formData);
};

</script>
